

<template>
  <!--方案概述页面 -->
  <div class="pr">
    <!-- 顶部1 -->
    <div class="fixTop">
      <div class="banner-warp" style>
        <div class="dn-container">
          <div class="banner-content">
            <h2 class="banner-content-sub-title">
              <a href target="_self"></a>
            </h2>
            <h1 class="banner-content-title">{{ schemeInfo.SolutionName }}</h1>
            <p class="banner-content-desc">{{ schemeInfo.SecondTitle }}</p>
            <div class="btns">
              <a class="blue-btn pc" @click="toDetailPage(schemeInfo)">Inventory</a>
              <a class="white-btn pc">Consult</a>
              <a class="blue-btn pc" @click="EditScheme">Edit</a>
            </div>
          </div>
        </div>
      </div>
      <!-- tab -->
      <div class="menu-container dn-hidden-xs">
        <ul class="menu-tab">
          <li
            class="tab-item"
            :class="currentTabIndex==index?'active':''"
            v-for="(item, index) in tabList"
            :key="index"
            @click="goAnchor('tab'+index,index)"
          >
            <a>{{ item }}</a>
          </li>
        </ul>
      </div>
    </div>

    <!-- 左边悬浮tab菜单栏 -->
    <a-drawer
      title="SchemeOverview"
      :placement="placement"
      :closable="false"
      :visible="isShowSchemeList"
      @close="onClose"
      :headerStyle="headerStyle"
      :drawerStyle="drawerStyle"
    >
      <div class="leftMenuTab">
        <ul class="tabBox" v-if="schemeList.length>0">
          <li
            v-for="(item, i) in schemeList"
            :key="i"
            class="panel"
            :class="currentSchemeIndex===i?'activeRed':''"
            @click="switchScheme(item,i)"
          >{{ item.SolutionName }}</li>
        </ul>
      </div>
    </a-drawer>
    <a-button class="openDrawerBtn" @click="toggleCollapsed">
      <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
    </a-button>

    <!-- 详情展示部分 -->
    <!-- 以下 -->
    <div>
      <!-- tabContent -->
      <div class="tabContent" v-show="!isShowEditScheme">
        <div class="tab0" id="tab0">
          <div class="dn-floor dn-floor-gray">
            <div class="dn-container">
              <div class="titleBox">
                <div class="hd dn-font-headline">Summarry</div>
                <div class="line"></div>
              </div>
              <!-- 详情内容 -->
              <div class="content">
                <p v-html="schemeInfo.Summary" style="font-size: large;"></p>
              </div>
            </div>
          </div>
        </div>

        <div class="tab1" id="tab1">
          <div class="dn-floor dn-floor-gray">
            <div class="dn-container">
              <div class="titleBox">
                <div class="hd dn-font-headline">Detail</div>

                <div class="line"></div>
              </div>
              <!-- 详情内容 -->
              <div class="content" v-html="DetailedInformation"></div>
            </div>
          </div>
        </div>
        <div class="tab2" id="tab2">
          <div class="dn-floor dn-floor-gray">
            <div class="dn-container">
              <div class="titleBox">
                <div class="hd dn-font-headline">Image</div>
                <div class="line"></div>
              </div>
              <!-- 详情内容 -->
              <div class="content">
                <slider ref="slider" :options="options">
                  <slideritem v-for="(a,b) in ImageArr" :key="b">
                    <img :src="a" width="100%" />
                  </slideritem>
                </slider>
              </div>
            </div>
          </div>
        </div>
        <div class="tab2" id="tab3">
          <div class="dn-floor dn-floor-gray">
            <div class="dn-container">
              <div class="titleBox">
                <div class="hd dn-font-headline">Video</div>
                <div class="line"></div>
              </div>
              <!-- 详情内容 -->
              <div class="content" v-if="videoList.length>0">
                <video-player
                  class="video-player-box"
                  ref="videoPlayer"
                  :options="playerOptions"
                  :playsinline="true"
                ></video-player>
              </div>
            </div>
          </div>
        </div>
        <div class="tab3" id="tab4">
          <div class="dn-floor dn-floor-gray">
            <div class="dn-container">
              <div class="titleBox">
                <div class="hd dn-font-headline">SME</div>
                <div class="line"></div>
              </div>
              <!-- 详情内容 -->
              <div class="content">
                <div v-for="(v, i) in SmeInfoList" :key="i">
                  <!-- <div v-for="(v, i) in SmeInfoList" :key="i"> -->
                  <a-popover :placement="tipOrientation">
                    <template slot="content">
                      <p style="width:190px;">{{ v.Summary }}</p>
                    </template>
                    <div class="singlePerson">
                      <!-- <a-icon type="close-circle" class="closeIcon" @click="delEditSem(i)" /> -->
                      <div class="tc">
                        <img :src="v.HeadPortrait" class="userHeadImg" />
                      </div>
                      <p class="semText">
                        Name
                        <span class="t2">{{ v.User_Name }}</span>
                      </p>
                      <p class="semText">
                        Department
                        <span class="t2">{{ v.Department_Name }}</span>
                      </p>
                    </div>
                  </a-popover>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 编辑菜单部分 -->
      <div v-if="isShowEditScheme">
        <EditSchemeDetail :SchemeId="SchemeId" @editStatus="editStatus"></EditSchemeDetail>
      </div>
    </div>
  </div>
</template>

<script>
import { slider, slideritem } from 'vue-concise-slider'
import EditSchemeDetail from '../project/EditScheme'
import LeftMenu from '@/pageModule/menu/menu'
export default {
  name: 'SolutionOverview',
  data() {
    return {
      headerStyle: { background: '#white', color: 'white', border: 'none' },
      drawerStyle: { background: 'black' },
      isShowSchemeList: false,
      collapsed: false,
      placement: 'left',
      tipOrientation: 'bottom',
      SmeInfoList: [],
      schemeList: [],
      SchemeId: '',
      currentTabIndex: 0,
      ImgList: [],
      schemeInfo: [],
      ImageArr: [],
      leftTabPosition: 'left',
      currentSchemeIndex: 0,
      SubId: '',
      ModuleId: '',
      videoList: [],
      videoUrl: '',
      DetailedInformation: '',
      isShowEditScheme: false,
      // 轮播参数
      options: {
        pagination: true,
        thresholdDistance: 100, // Sliding distance threshold
        thresholdTime: 300, // Sliding time threshold decision
        grabCursor: true, // Scratch style
        speed: 1000, // Sliding speed
        timingFunction: 'ease', // Sliding mode
        loop: true, // Infinite loop
        autoplay: 3500 // Auto play[ms]
      },
      tabList: ['Summarry', 'Detail', 'image', 'Video', 'SME'],
      departmentList: ['TE', 'ME', 'IE', 'MFG', 'EHS', 'QA', 'HR'],
      departmentDetail: [
        {
          name: 'ProductionEngineer',
          content: 'Product design, test and verification'
        },
        {
          name: 'ProductionEngineer',
          content: 'Product design, test and verification'
        },
        {
          name: 'ProductionEngineer',
          content: 'Product design, test and verification'
        },
        {
          name: 'ProductionEngineer',
          content: 'Product design, test and verification'
        },
        {
          name: 'ProductionEngineer',
          content: 'Product design, test and verification'
        },
        {
          name: 'ProductionEngineer',
          content: 'Product design, test and verification'
        },
        {
          name: 'ProductionEngineer',
          content: 'Product design, test and verification'
        }
      ],
      department: '', //当前部门
      planIndex: 0,
      // 视频options
      playerOptions: {
        //播放速度
        playbackRates: [0.5, 1.0, 1.5, 2.0],
        //如果true,浏览器准备好时开始回放。
        autoplay: false,
        // 默认情况下将会消除任何音频。
        muted: false,
        // 导致视频一结束就重新开始。
        loop: false,
        // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        preload: 'auto',
        language: 'zh-CN',
        // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        aspectRatio: '16:9',
        // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        fluid: true,
        sources: [],
        //你的封面地址
        poster: '',
        //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        notSupportedMessage:
          'This video cannot play at the moment, please try again later',
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          //全屏按钮
          fullscreenToggle: true
        }
      }
    }
  },
  watch: {
    SchemeId() {
      this.geSchemeDetail()
    }
  },
  created() {
    this.getSchemeList()
    this.initMockData()
  },
  mounted() {
    let departMentData = sessionStorage.getItem('departMentData')
    // 方案清单
    this.department = this.departmentList[0]
    this.switchScheme()
  },
  components: {
    EditSchemeDetail,
    LeftMenu
  },
  methods: {
    initMockData() {
      const a = {
        Create_Time: '2020-06-09T09:00:23.153',
        Department_ID: '01',
        Department_Name: '公共',
        HeadPortrait:
          'http://192.168.1.10:8099/1a0842eaaadd4753bda3f663394a230d.png',
        IsEnable: true,
        NTID: '',
        PhoneNum: '',
        Remark: null,
        Sex: '',
        Update_Time: null,
        User_ID: 63,
        User_Name: 'fffff',
        User_Reallyname: 'fffff',
        User_Type: 0,
        User_TypeName: null,
        Summary:
          'Ma Huateng, han Nationality, was born in Chaonan District, Shantou city, Guangdong Province on October 29, 1971 in Baisugang, Dongfang County, Guangdong Province (now dongfang City, Hainan Province) [1-2].He received his Bachelor of Science degree from Shenzhen University in 1993.'
      }
      for (let index = 0; index < 8; index++) {
        this.$nextTick(() => {
          this.SmeInfoList.push(a)
        })
      }
    },
    toggleCollapsed() {
      this.isShowSchemeList = true
      this.collapsed = !this.collapsed
    },
    onClose() {
      this.isShowSchemeList = false
    },
    callback(e) {},
    editStatus(e) {
      this.isShowEditScheme = e
    },
    toDetailPage(e) {
      const param = JSON.stringify(e)
      this.$router.push({ path: '/PlanInDetail', query: { detail: param } })
    },
    // 方案列表
    getSchemeList() {
      const SubId = sessionStorage.getItem('SubId')
      const ModuleId = sessionStorage.getItem('ModuleId')
      const b = {
        method: 'ShpScheme_Que',
        userId: window.userId || 1,
        sign: 'A0251DD654CBB418AF1422CA880A1270',
        currentPage: 0,
        limit: 0,
        language: window.language || 1,
        datas: {
          ModuleId: ModuleId,
          SubId: SubId
        }
      }

      this.$post(b).then(result => {
        this.schemeList = result.data
        console.log('this.schemeList :>> ', this.schemeList)
        if (result.data.length > 0) {
          this.SchemeId = result.data[0].SchemeId
        }
        this.videoList = [
          {
            //类型
            type: '', // 可以播放
            //url地址
            src: result.data.Video
          }
        ]
        if (result.data.Video.endsWith('.mp4')) {
          this.videoList[0].type = 'video/mp4'
          console.log('this.videoList :>> ', this.videoList)
        }

        this.$nextTick(() => {
          this.videoUrl = result.data.Video
        })
        this.playerOptions.sources = this.videoList
      })
    },
    // 方案的详细信息
    switchScheme(item, i) {
      if (item) {
        this.SchemeId = item.SchemeId
        this.currentSchemeIndex = i
      }
      this.ImageArr = []
      const a = {
        method: 'ShpSchemeDetailed_Que',
        userId: window.userId || 1,
        sign: 'A0251DD654CBB418AF1422CA880A1270',
        currentPage: 0,
        limit: 0,
        language: window.language || 1,
        datas: {
          SchemeId: this.SchemeId
        }
      }
      this.$post(a).then(result => {
        this.schemeInfo = result.data
        this.ImageArr = eval('(' + result.data.Image + ')')
        this.DetailedInformation = this.schemeInfo.DetailedInformation.split(
          '\\'
        ).join('')
        this.videoList = [
          {
            //类型
            type: 'video/mp4', // 可以播放
            //url地址
            // src: result.data.Video
            src: result.data.Video
          }
        ]
        this.playerOptions.sources = this.videoList
      })
    },
    geSchemeDetail() {
      const a = {
        method: 'ShpSchemeDetailed_Que',
        userId: window.userId || 1,
        sign: 'A0251DD654CBB418AF1422CA880A1270',
        currentPage: 0,
        limit: 0,
        language: window.language || 1,
        datas: {
          SchemeId: this.SchemeId
        }
      }
      this.$post(a).then(result => {
        console.log('SchemeDatail', result.data)
        this.schemeInfo = result.data
        this.ImageArr = eval('(' + result.data.Image + ')')
        this.DetailedInformation = this.schemeInfo.DetailedInformation.split(
          '\\'
        ).join('')
        this.videoList = [
          {
            //类型
            type: 'video/mp4', // 可以播放
            //url地址
            // src: result.data.Video
            src: result.data.Video
          }
        ]
        this.playerOptions.sources = this.videoList
      })
    },
    //锚点跳转
    goAnchor(selector, index) {
      this.currentTabIndex = index
      document.getElementById(selector).scrollIntoView(true)
    },
    selectPlan(e, index) {
      this.planIndex = index
      this.department = e
    },
    leftMenuSwitch(e) {},
    EditScheme() {
      this.isShowEditScheme = true
    }
  }
}
</script>

<style lang="less">
@import url('css/SolutionOverview.less');
</style>